import React, { Component } from 'react'
import { HashRouter as Router, Route, Link, Switch} from 'react-router-dom'
class Index extends Component{
  render(){
    return <h1>首页</h1>
  }
}
class User extends Component{
  render(){
    console.log(this.props.routes);
    return (
      <div>
        <h1>用户</h1>
        <Link to='/user/detail'>用户详情</Link>
        <Switch>
          {/* <Route path='/user/detail' render={()=>{
            return <UserDetail></UserDetail>
          }}></Route> */}
          {this.props.routes.map((route,index)=>{
            return (
                <Route key={route.key} 
                path={route.path}
                render={(props)=>{
                  return <route.component {...props} routes={route.routes}></route.component>
                }}></Route>
              )
          })}
        </Switch>
      </div>
    )
  }
}
class UserDetail extends Component{
  render(){
    return <h1>用户详情部分</h1>
  }
}
let routes = [
  {
    path:'/index',
    key:'index',
    component: Index
  },
  {
    path:'/user',
    key:'user',
    component: User,
    routes:[
      {
        path:'/user/detail',
        key:'./user/detail',
        component:UserDetail
      }
    ]
  },
]
export default class App extends Component {
  render() {
    return (
      <div>
        <div className="my-router">
          <Router>
            <Link to='/index'>首页</Link>
            <Link to='/user'>用户</Link>
            {
              routes.map((route,i)=>{
                return <Route path={route.path} key={route.key} render={(props)=>{
                  return <route.component {...props} routes={route.routes}></route.component>
                }}>
                </Route>
              })
            }
          </Router>
        </div>
      </div>
    )
  }
}
